<template>
  <div id="atd" class="atd">
    <atd-side-menus/>
    <div class="atd__container">
      <atd-header :user="user" />
      <div class="atd_pages">
        <transition name="fade" mode="out-in">
          <router-view></router-view>
        </transition>
      </div>
    </div>
  </div>
</template>

<script>
import login from '@/api/login';
import { replaceState, sessionStorage } from '@/utils/tools';
import storageKeys from '@/constants/storage';
import Emitter from '@/vuego/mixins/emitter';

import atdHeader from './Header';
import atdSideMenus from './SideMenus';

export default {
  name: 'atd',
  componentName: 'atd',
  mixins: [Emitter],
  data() {
    return {
      user: {},
      transitionName: '',
    };
  },
  mounted() {
    const userKey = storageKeys.user;
    let fromCached = false;
    login()
      .then((res) => {
        if (!res.logged) {
          replaceState();
          this.user = res.results;
          sessionStorage.add(userKey, { ...res.results}, true);
          this.handleLoginSuccess(fromCached);
          return;
        }
        if (sessionStorage.has(userKey)) {
          this.user = sessionStorage.get(userKey, true);
          fromCached = true;
          this.handleLoginSuccess(fromCached);
        }
      });

    this.$on('collapse', this.handleCollapse);
  },
  methods: {
    handleCollapse(val) {
      this.broadcast('AtdSideMenus', 'collapse-update', val);
    },
    handleLoginSuccess(fromCached) {
      this.broadcast('AtdBlockManagement', 'logined', fromCached);
    },
  },
  components: {
    atdHeader,
    atdSideMenus,
  },
};
</script>

<style lang="less">
@import '~@/styles/index.less';
</style>
